<template>
	<view class="login">
		<view class="topBox">
			<image :src="imaurl+'a1.png'" style="width: 100%;height: 100%;" mode=""></image>
			<view class="contentBox">
				<image :src="imaurl+'a2.png'" style="width: 378rpx;height: 300rpx;margin-left: 189rpx;" mode=""></image>

				<!-- 用户端登录 -->
				<view v-if="loginType" class="">
					<view class="loginBox" @click="handleLogin">
						<image :src="imaurl+'wx.png'" style="width: 38rpx;height: 32rpx;margin-right: 10rpx;" mode="">
						</image>
						<view class="">
							微信登录
						</view>
					</view>

					<view class="" style="display: flex;align-items: center;margin-top: 20rpx;margin-left: 128rpx;">
						<view class="" @click="checked=!checked">
							<image v-if="checked" :src="imaurl+'fill.png'"
								style="width: 36rpx;height: 36rpx;margin-top: 10rpx;" mode=""></image>
							<image v-else :src="imaurl+'null.png'" style="width: 36rpx;height: 36rpx;margin-top: 10rpx;"
								mode="">
							</image>
						</view>
						<view class="xieyi">
							<text @click="checked=!checked">已阅读并同意</text>
							<text style="color: black;" @click="handleUser">《用户协议》</text>
							和<text style="color: black;" @click="handleYinsi">《隐私政策》</text>
						</view>
					</view>

				</view>

				<!-- 代收中转登录 -->

				<view v-else class="" style="margin-top: 100rpx;">
					<view class="inputBox">
						<image :src="imaurl+'a3.png'" style="width: 48rpx;height: 48rpx;margin-right: 20rpx;" mode="">
						</image>
						<input type="text" v-model="account" placeholder="请输入账号" />
					</view>
					<view class="inputBox" style="margin-top: 40rpx;">
						<image :src="imaurl+'a4.png'" style="width: 48rpx;height: 48rpx;margin-right: 20rpx;" mode="">
						</image>
						<input type="password" v-model="password" placeholder="请输入密码" />
					</view>

					<view class="loginBox" @click="handleReceiveLogin">
						登录
					</view>
				</view>

			</view>
		</view>




		<view v-if="loginType" class="ortherType" @click="handleloginType">
			代收中转中心登录
		</view>
		<view v-else class="ortherType" style="width: 160rpx;margin-left: -80rpx;" @click="handleloginType">
			用户端登录
		</view>

	</view>
</template>

<script>
	import {
		getOpenid,
		OtherLogin,
		login
	} from "@/api/api.js"
	export default {
		data() {
			return {
				checked: false,
				loginType: true,
				logincode: "",
				account: "", //用户名
				password: "", //密码
				imaurl: "https://szgb.tongchengbang.cc/img/image/"
			}
		},
		onLoad() {
			if (uni.getStorageSync('token')) {
				console.log("2333")
				uni.reLaunch({
					url: "/pages/client/home/index"
				})
			}
		},
		onShow() {

		},
		methods: {
			handleloginType() {
				this.loginType = !this.loginType
				uni.setStorageSync('idFlag', this.loginType)
			},
			handleUser() {
				uni.navigateTo({
					url: "./user"
				})
			},
			handleYinsi() {
				uni.navigateTo({
					url: "./yinsi"
				})
			},
			handleLogin() {
				uni.setStorageSync('idFlag', true)
				if (!this.checked) {
					uni.showToast({
						title: '请先同意用户协议和隐私政策！',
						icon: "none",
						duration: 1500
					});
					return
				}
				let that = this
				uni.login({
					provider: 'weixin',
					success: async (loginRes) => {
						console.log("微信获取code码", loginRes);
						that.logincode = loginRes.code
						let subRes = await getOpenid({
							code: that.logincode
						})
						// console.log("333", subRes)
						if (subRes.code == 1) {
							let Dres = await OtherLogin({
								openid: subRes.data.openid
							})
							if (Dres.code == 1) {
								uni.showToast({
									title: Dres.msg,
									icon: "none",
									duration: 1500
								});
								uni.setStorageSync('token', Dres.data.token)
								if (Dres.data.isbindmobile == 0) {
									setTimeout(() => {
										uni.navigateTo({
											url: "./bindMoblie"
										})
									}, 1600)
								} else {
									setTimeout(() => {
										uni.reLaunch({
											url: "/pages/client/home/index"
										})
									}, 1600)
								}


							} else {
								uni.showToast({
									title: subRes.msg,
									icon: "none",
									duration: 1500
								});
							}
						} else {
							uni.showToast({
								title: subRes.msg,
								icon: "none",
								duration: 1500
							});

						}

					}
				})
				return



			},
			async handleReceiveLogin() {
				if (this.account == "") {
					uni.showToast({
						title: "请输入账号",
						icon: "none",
						duration: 1500
					});
					return
				}
				if (this.password == "") {
					uni.showToast({
						title: "请输入密码",
						icon: "none",
						duration: 1500
					});
					return
				}
				let data = {
					account: this.account,
					password: this.password
				}
				// console.log("4444", data)
				let res = await login(data)
				if (res.code == 1) {
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 1500
					});
					uni.setStorageSync('token', res.data.userinfo.token)
					uni.setStorageSync('userInfo', res.data.userinfo)
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/transfer/receive/index"
						})
					}, 1600)
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 1500
					});
				}

			},
		}
	}
</script>

<style scoped lang="scss">
	.login {
		width: 100%;
		height: 100%;
		background-color: #ffffff;

		.topBox {
			width: 100%;
			height: 764rpx;
			position: relative;

			.contentBox {
				position: absolute;
				top: 276rpx;
				width: 100%;

				.loginBox {
					width: 630rpx;
					height: 88rpx;
					background: #00BF52;
					border-radius: 200rpx 200rpx 200rpx 200rpx;
					margin: 0 auto;
					margin-top: 100rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 38rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.xieyi {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 28rpx;
		}

		.ortherType {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #00BF52;
			line-height: 38rpx;
			width: 256rpx;
			position: absolute;
			bottom: 120rpx;
			left: 50%;
			margin-left: -128rpx;
		}

		.inputBox {
			width: 670rpx;
			height: 104rpx;
			background: #F6F6F6;
			box-shadow: 0rpx 0rpx 60rpx 0rpx rgba(255, 255, 255, 0.8);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			padding: 28rpx 20rpx;
			box-sizing: border-box;
		}
	}
</style>